<template>
  <view class="myWallet">
    <topTitle title="我的錢包">
      <template #right>
        <i @tap="goTo('/pages/pay/pay')"></i>
      </template>
    </topTitle>
    <view class="com">
      <view class="walletInfo">
        <view>當前可用餘額</view>
        <view
          >$<text>{{ balance }}</text></view
        >
        <view>
          <view @tap="goTo('/pages/myWallet/withdrawal')">提現</view>
          <view @tap="rechargeMethodsOpen">充值</view>
        </view>
      </view>
      <view class="record">
        <view @tap="goTo('/pages/myWallet/withdrawalHistory')">
          <view><i></i></view>
          <view>提現紀錄</view>
        </view>
        <view @tap="goTo('/pages/myWallet/rechargeRecord')">
          <view><i></i></view>
          <view>充值紀錄</view>
        </view>
      </view>
      <view class="recordList">
        <view class="title">
          <view>餘額變動明細</view>
          <view @click="goTo('/pages/myWallet/changeList')">查看全部</view>
        </view>
        <view class="userOrderList">
          <view v-for="(item, idx) in UserOrderList" :key="idx">
            <view>
              <view>{{ orderIdFilter(item.order_id) }}</view>
              <view
                >{{ item.after_money > item.before_money ? "+" : "-"
                }}{{ item.money }}</view
              >
            </view>
            <view>
              <view>{{ formattingTime(item.add_time, 0) }}</view>
              <view>餘額 {{ item.after_money }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <rechargeMethods ref="rechargeMethodsRef" />
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { UserMoney, UserOrder, OrderType } from "@/api/UserApi";
import { onReachBottom } from "@dcloudio/uni-app";
import rechargeMethods from "./components/rechargeMethods.vue";

let select_time: any = null;
let UserOrderList = ref<Array<any>>([]);
let OrderTypeList = ref<Array<any>>([]);
let balance = ref<number>(0);
const UserMoneyFn = async () => {
  balance.value = uni.getStorageSync("balance");
  balance.value = await UserMoney();
};

const OrderTypeFn = async () => {
  OrderTypeList.value = await OrderType();
};
let rechargeMethodsRef = ref<any>(null);
const rechargeMethodsOpen = async () => {
  rechargeMethodsRef.value.rechargeMethodsOpen();
};

const UserOrderFn = async () => {
  let list = await UserOrder({
    select_time,
    income: null,
    order_id: null,
  });
  if (!select_time) {
    UserOrderList.value = list;
  } else {
    UserOrderList.value = [...UserOrderList.value, ...list];
  }
};
const orderIdFilter = (order_id: number) => {
  let item = OrderTypeList.value.filter((e) => e.order_id == order_id);
  if (!item.length) {
    return;
  }
  return item[0].order_name;
};

UserMoneyFn();
UserOrderFn();
OrderTypeFn();

onReachBottom(() => {
  select_time = UserOrderList.value[UserOrderList.value.length - 1].add_time;
  UserOrderFn();
});
</script>
<style scoped lang="scss">
@import "../../static/scss/myWallet.scss";
</style>
